<template>
  <div class="card-widget heo-right-widget" id="card-wechat" @click="weChatClick">
    <div id="flip-wrapper">
      <div id="flip-content">
        <div class="face"
             :style="{background: 'url(' + authorInfo.weChatImage +  ') center center / 100% no-repeat'}"></div>
        <div class="back face"
             :style="{background: 'url(' + authorInfo.hoverWeChatImage +  ') center center / 100% no-repeat'}"></div>
      </div>
    </div>
  </div>
</template>

<script setup>
import {computed} from "vue";
import store from "../../store/index.js";

const authorInfo = computed(() => store.state.data.authorInfo);

const weChatClick = () => {
  window.open('/wechat')
}
</script>

<style scoped>
#aside-content .card-widget#card-wechat {
  background: #07C160;
}

#aside-content .card-widget#card-wechat::before {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background: url(/src/assets/images/gzh_cover.png) center center no-repeat;
  content: '';
  background-size: cover;
  transition: .2s cubic-bezier(.45, .04, .43, 1.21)
}

#aside-content .card-widget#card-wechat:hover:before {
  top: 100%;
  opacity: 0;
  transition: .3s ease-out
}
</style>
